<template>
  <div id="app">
    <side-bar>
      <span>{{ userName }}</span>
      <span class="logout" v-if="userName != 'xxxx'">注销</span>
    </side-bar>
    
    <div class="right-content">
      
      <keep-alive exclude="Detail"><router-view /></keep-alive>
    </div>
  </div>
</template>
<script>
import SideBar from './components/SideBar/sideBar.vue'
import TitleBar from './components/titleBar/TitleBar.vue'

export default {
  data() {
    return {
      userName: "xxxx",
    };
  },
  // updated() {
  //   // this.$bus.$on("loginName", (loginName) => {
  //   //   this.userName = loginName;
  //   //   console.log(this.userName);
  //   // });
  // },
  updated() {
    this.$bus.$on('loginName', (res)=>{
      console.log(res);
      this.userName = res
      console.log(this.userName);
    })
  },
  components: { SideBar, TitleBar },
};
</script>

<style lang="less" scope>
@import "./assets/css/base.css";
#app {
  position: relative;
  background-color: rgb(241, 245, 248);
}
#app .right-content {
  width: calc(100% - 20vw);
  position: absolute;
  left: 20vw;
  top: 10px;
  background-color: rgb(241, 245, 248);
  margin: 0 auto;
}
::-webkit-scrollbar {
  display: none;
}
.logout {
  font-size: 12px;
  color: #2aabda;
  margin-left: 4px;
}
</style>
